<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button onclick="Path()">Get请求 PathVariable</button>
    <button onclick="GETParams()">Get普通的请求携带参数</button>
    <button onclick="POSTFormData()">Post表单传输</button>
    <button onclick="POSTFile()">Post文件传输</button>
    <button onclick="POSTJSON()">PostJSON传输</button>
    <button onclick="POSTheader()">Post携带请求头传输</button>
    <input type="file" id="file1">
    <script>
        function POSTheader() {
            let xml = new XMLHttpRequest();
            xml.open("POST", "http://localhost:8080/api/header", true);
            //设置请求头为json格式传输的代码
            xml.setRequestHeader("content-type","application/json")
            xml.setRequestHeader("token","868")//成功的话后端会输出868
            let jsonObject = {
                "val":"800",
                "data":true
            }
            //将json对象转为json文本传过去
            xml.send(JSON.stringify(jsonObject));
            xml.onreadystatechange = function () {
                if (xml.readyState == 4 && xml.status == 200) {
                    //传过来的时json对象，得转成js对象处理
                    let jsontest = xml.responseText;
                    let jsonobj = JSON.parse(jsontest);
                    console.log(jsonobj);
                }
            }

        }

        function POSTJSON() {
            let xml = new XMLHttpRequest();
            xml.open("POST", "http://localhost:8080/api/postjson", true);
            //设置请求头为json格式传输的代码
            xml.setRequestHeader("content-type","application/json")
            let jsonObject = {
                "val":"800",
                "data":true
            }
            //将json对象转为json文本传过去
            xml.send(JSON.stringify(jsonObject));
            xml.onreadystatechange = function () {
                if (xml.readyState == 4 && xml.status == 200) {
                    //传过来的时json对象，得转成js对象处理
                    let jsontest = xml.responseText;
                    let jsonobj = JSON.parse(jsontest);
                    console.log(jsonobj);
                }
            }

        }

        function POSTFile() {
            let xml = new XMLHttpRequest();
            xml.open("POST", "http://localhost:8080/api/postFile", true);
            let dataObj = new FormData();
            dataObj.append("val", "22");
            dataObj.append("data", true);
            //获取文件对象
            let filedata = document.querySelector("#file1").files[0];
            //文件名要与后端一致
            dataObj.append("file1", filedata);
            xml.send(dataObj);
            xml.onreadystatechange = function () {
                if (xml.readyState == 4 && xml.status == 200) {
                    //传过来的时json对象，得转成js对象处理
                    let jsontest = xml.responseText;
                    let jsonobj = JSON.parse(jsontest);
                    console.log(jsonobj);
                }
            }

        }

        function POSTFormData() {
            let xml = new XMLHttpRequest();
            xml.open("POST", "http://localhost:8080/api/postParams", true);
            let dataObj = new FormData();
            dataObj.append("val", "22");
            dataObj.append("data", true);
            xml.send(dataObj);
            xml.onreadystatechange = function () {
                if (xml.readyState == 4 && xml.status == 200) {
                    //传过来的时json对象，得转成js对象处理
                    let jsontest = xml.responseText;
                    let jsonobj = JSON.parse(jsontest);
                    console.log(jsonobj);
                }
            }

        }
        let xml = new XMLHttpRequest();
        let base_url = "http://localhost:8080/api/";
        function Getreq(url, flag) {
            xml.open("GET", url, flag ? flag : true);
            xml.send();
        }

        function GETParams() {
            Getreq(base_url + "getParams?val=100&data=888")
        }

        function Path() {
            Getreq(base_url + "get/666")
        }
        xml.onreadystatechange = function () {
            if (xml.readyState == 4 && xml.status == 200) {
                //传过来的时json对象，得转成js对象处理
                let jsontest = xml.responseText;
                let jsonobj = JSON.parse(jsontest);
                console.log(jsonobj);
            }
        }

    </script>
</body>

</html>